<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>基础用法</span>
          </div>
          <el-row>
            <div class="block">
              <span class="demonstration">默认不区分颜色</span>
              <el-rate v-model="value1"></el-rate>
            </div>
            <div class="block">
              <span class="demonstration">区分颜色</span>
              <el-rate
                v-model="value2"
                :colors="colors">
              </el-rate>
            </div>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>辅助文字</span>
          </div>
          <el-row>
            <el-rate
              v-model="value"
              show-text>
            </el-rate>

          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>只读</span>
          </div>
          <el-row>
            <el-rate
              v-model="value3"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "rate",
  data() {
    return {
      value: null,
      value1: null,
      value2: null,
      value3: 3.7,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    }
  }
}
</script>

<style scoped lang="scss">
.clearfix{
  font-size: 14px;
}
.el-col{
  margin-bottom: 20px;
}
.block{
  float: left;
  text-align: center;
  margin-right: 20px;
  span{
    font-size: 14px;
  }
}
</style>
